<template>
  <el-dialog title="新增线索" :visible.sync="dialogVisible">
    <div class="clue-submit">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="small"
        label-width="100px"
        label-position="top"
      >
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="藏品登记号" prop="clueName">
              <el-input
                v-model="formData.colId"
                placeholder="请输入藏品登记号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="藏品名称" prop="sourceCome">
              <el-input
                v-model="formData.colName"
                placeholder="请输入藏品名称"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="藏品类型" prop="sourceCome">
              <el-input
                v-model="formData.type"
                placeholder="请输入藏品类型"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="藏品数量" prop="sourceCome">
              <el-input
                v-model="formData.number"
                placeholder="请输入藏品数量"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="藏品质量" prop="sourceCome">
              <el-input
                v-model="formData.quality"
                placeholder="请输入藏品质量"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="藏品级别" prop="sortId">
              <el-select
                v-model="formData.gradeId"
                placeholder="请输入级别"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in gradeList"
                  :key="index"
                  :label="item.gradeName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保存状态" prop="sourceCome">
              <el-input
                v-model="formData.status"
                placeholder="请输入保存状态"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年代" prop="yearId">
              <el-select
                v-model="formData.yearId"
                placeholder="请选择年代"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in yearList"
                  :key="index"
                  :label="item.yearName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="入藏时间" prop="findTime">
              <el-date-picker
                v-model="formData.intime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择入藏日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="藏品来源" prop="identifyDesc">
              <el-input
                v-model="formData.come"
                type="textarea"
                placeholder="请输入藏品来源"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="藏品描述" prop="clueDesc">
              <el-input
                v-model="formData.colDesc"
                type="textarea"
                placeholder="请输入藏品描述"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item size="medium">
          <el-row :gutter="15">
            <el-col :span="12">
              <el-button class="btn" type="primary" @click="submitForm">
                提交
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button class="btn" type="info" @click="resetForm">
                重置
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import { addRegister, getOthers } from '@/api/clue/register';
export default {
  components: {},
  props: [],
  data() {
    return {
      gradeList: [],
      yearList: [],
      formData: {
        colId: '',
        colName: '',
        gradeId: '',
        type: '',
        number: '',
        quality: '',
        status: '',
        come: '',
        yearId: '',
        colDesc: '',
        intime: ''
      },
      rules: {
        col_id: [
          {
            required: true,
            message: '此项必填',
            trigger: 'blur'
          }
        ],
        col_name: [
          {
            required: true,
            message: '此项必填',
            trigger: 'blur'
          }
        ],
        grade_id: [
          {
            required: true,
            message: '此项必填',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.$parent.dialogAddVisible;
      },
      set(v) {
        this.$parent.dialogAddVisible = v;
      }
    }
  },
  created() {
    this.getOthers();
  },
  methods: {
    async getOthers() {
      const { data: res } = await getOthers();
      console.log(res);
      if (res.code === 200) {
        this.yearList = res.data.yearList;
        this.gradeList = res.data.gradeList;
      } else {
        this.$message.error('下拉框获取失败');
      }
    },
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return;
        const { data: res } = await addRegister(this.formData);
        if (res.code === 200) {
          this.$message.success('新增成功');
          this.dialogVisible = false;
          // this.resetForm();
          this.$parent.getAllRegister();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    resetForm() {
      this.$refs['elForm'].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
  .clue-submit {
    .btn {
      width: 100%;
    }
  }
</style>
